<template>
	<view style="background-color: white;">
		<tribeNavigation :sname="details.nickName" :avater="details.avater" :address="details.address"></tribeNavigation>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item>
				<view class="swiper-item">
					<image :src="details.images[0]" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">
			{{details.title}}
		</view>
		<view class="state" >
			<view v-if="isAfterTime(details.endTime)">
				已结束
			</view>
			<view v-else>
				进行中
			</view>
		</view>
		<view class="content">
			<view class="text">
				{{details.des}}
			</view>
			<view class="">活动开始时间：{{startTime}}</view>
			<view class="">活动结束时间：{{endTime}}</view>
			<view class="">地点：{{details.address}}</view>
			<view>
				<view v-if="isAfterTime(details.endTime)">
					<view class="over">活动已结束</view>
				</view>
				<view v-else-if="count==1" class="finish">
					已报名
				</view>
				<view v-else>
					<view class="participate">点击报名按钮参与吧！</view>
					<image src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/03/18/09408af571ec487293c6072fb459cd89signUp.png" mode="" @click="signup()"></image>
				</view>
			</view>
			<view class="signNum">
				已报名人数  {{attendNum}}/{{totalNum}}
			</view>
		</view>
		<view style="background-color: #fff; height: 110rpx;"></view>
	</view>
</template>

<script>
	import TribeNavigation from '../../../components/tribeNavigation/tribeNavigation.vue'
	import config from '../../../utils/config'
	export default {
		components:{
			TribeNavigation
		},
		onLoad(e){
			this.details=JSON.parse(e.details)
			this.getDetailData()
			this.attendNum=this.details.attendNum
			
		},
		onShow() {
			this.refresh(this.details.id);
			this.getDetailData()
		},
		data() {
			return {
				totalNum:"",
				groupchat:"",
				startTime:"",
				endTime:"",
				address:"",				
				type:0,
				id:0,
				title:'',
				status:'',
				signUpNumber:'',
				des:'',
				details:{},
				count:null,
				attendNum:0
			};
		},
		methods:{
			signup(){
				uni.navigateTo({
					url:`/pages/tribe/details/signUp?details=`+JSON.stringify(this.details)
				})
			},
			refresh(id){
				uni.request({
					url: config.domain+'activities/'+id,
					success: (res) => {
						this.attendNum=res.data.attendNum
					}
				})
			},
			isAfterTime(endtime){
				const givenDateTime = new Date(endtime);
				const now = new Date();  
				return now > givenDateTime;  
			},
			getDetailData(){
				this.$H.get("joinActivity/judge?id="+this.details.id).then(res=>{
					this.count=res.msg;
				})
				this.startTime = this.details.startTime;
				this.startTime = this.startTime.replace('T', ' '); 
				this.endTime = this.details.endTime;
				this.endTime = this.endTime.replace('T', ' '); 
				if(this.details.value==0){
					this.totalNum="10"
				}
				if(this.details.value==1){
					this.totalNum="20"
				}
				if(this.details.value==2){
					this.totalNum="50"
				}
				if(this.details.value==3){
					this.totalNum="100"
				}
				if(this.details.value==4){
					this.totalNum="不限"
				}
			}
		}
	}
</script>

<style lang="scss">
.swiper {
	width: 550rpx;
	height: 720rpx;
	margin-left: 100rpx;
	image{
		width: 550rpx;
		height: 720rpx;
	}
}
.title {
	font-size: 45rpx;
	font-weight: bold;
	margin-left: 50rpx;
	display: inline-block;
	height: 80rpx;
}
.state {
	float: right;
	display: inline-block;
	background: linear-gradient(to right,#ffd6af,#ffa773);
	height: 70rpx;
	width: 180rpx;
	color: white;
	font-weight: bold;
	text-align: center;
	font-size: 35rpx;
	line-height: 70rpx;
}
.content {
	
	margin-left: 50rpx;
	margin-right: 50rpx;
	// font-weight: bold;
	color: #7c7c7c;
	// text-indent: 60rpx;
	image {
		height: 80rpx;
		width: 270rpx;
		margin-left: 200rpx;
		margin-top: 20rpx;
	}
	.over{
		width: 270rpx;
		margin-left: 200rpx;
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		margin-top: 30rpx;
		color: black; 
	}
	.finish{
		width: 270rpx;
		margin-left: 200rpx;
		text-align: center;
		font-weight: bold;
		font-size: 30rpx;
		margin-top: 30rpx;
		color: black;     
	}
	.participate{
	}
	.signNum {
		width: 270rpx;
		margin-left: 200rpx;
		text-align: center;
		font-weight: bold;
		font-size: 25rpx;
		margin-top: 20rpx;
	}
}
// .bottom {
// 	position: fixed;
// 	bottom: 0rpx;
	
	
// 	.left {
// 		padding-top: 20rpx;
// 		width: 350rpx;
// 		background: linear-gradient(to right,#e3ecfb,#bdc3e6);
// 		color: white;
// 		display: inline-block;
// 		height: 80rpx;
// 		font-size: 45rpx;
// 		font-weight: bold;
// 		text-align: center;
// 	}
// 	.right {
// 		padding-top: 20rpx;
// 		width: 400rpx;
// 		display: inline-block;
// 		background: linear-gradient(to right,#e8fbf7,#afb7e3);
// 		height: 60rpx;
// 		font-size: 35rpx;
// 		font-weight: bold;
// 		color: #929ca0;
// 		position: absolute;
// 		bottom: 0rpx;
// 		text-indent: 15rpx;
// 	}
// }
</style>
